<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
    <script>
        window.onload = function (){
            var box1 =document.getElementById("box1");

            var btn1 = document.getElementById("btn1");

            btn1.onclick = function (){
                /*
                * 通过js修改样式
                * 语法；元素.style.样式名 = 值
                * 注意：如果css中样式含有 -  号
                * 需要将这种样式名改为驼峰命名发
                * 去掉后面第一个字母大写
                * */
                box1.style.width="400px";
                box1.style.height="400px";
                box1.style.background="blue";
            };
            //点击按钮2以后，读取元素的样式 
            var btn2 = document.getElementById("btn2");

            btn2.onclick = function(){
                //读取box1样式
                /*
                语法：元素.style.样式名

                通过style属性设置和读取的都是内联 样式
                无法读取样式表中的样式
                */

                alert(box1.style.width);

            };
        }
    </script>
</head>
<body>
    <button id="btn1">点我一下</button>
    <button id="btn2">点我一下2</button>
    <div id="box1"></div>
</body>
</html>